<template>
  <div class="photo-info">
    <div class="deal-img">
      <h3>处理前照片</h3>
      <div v-if="beforeHnadle&&beforeHnadle.length" class="img-list">
        <img @click="showImagePreview(beforeHnadle)" v-for="(src,index) in beforeHnadle" :key="index" :src="src" alt="">  
      </div>
    </div>
    <div v-if="afterFeedback&&afterFeedback.length" class="deal-img">
      <h3>反馈后照片</h3>
      <div class="img-list">
        <img @click="showImagePreview(afterFeedback)" v-for="(src,index) in afterFeedback" :key="index" :src="src" alt="">
      </div>
    </div>
    <div v-if="afterHandle&&afterHandle.length" class="deal-img">
      <h3>处理后照片</h3>
      <div class="img-list">
        <img @click="showImagePreview(afterHandle)" v-for="(src,index) in afterHandle" :key="index" :src="src" alt="">
      </div>          
    </div>
  </div>
</template>

<script>
import { replaceImgUrl } from '@/common/js/utils'
/**
 * 处置前后照片
 */
export default {
  props: {
    handleImg: {
      type: Object,
      default() {
        return {
          beforeHnadle: [],
          afterFeedback: [],
          afterHandle: []
        }
      }
    }
  },
  computed: {
    beforeHnadle() {
      return this.handleImg.beforeHnadle ? this.handleImg.beforeHnadle.map(img => {
        return replaceImgUrl(img)
      }) : []
    },
    afterFeedback() {
      return this.handleImg.afterFeedback ? this.handleImg.afterFeedback.map(img => {
        return replaceImgUrl(img)
      }) : []
    },
    afterHandle() {
      return this.handleImg.afterHandle ? this.handleImg.afterHandle.map(img => {
        return replaceImgUrl(img)
      }) : []
    },
  },
  methods:{
    showImagePreview(imgs) {
      this.$createImagePreview({
        imgs
      }).show()
    }
  }
}
</script>

<style lang="stylus" scoped>
.photo-info{
  width:100%;
  .deal-img{
    background:rgba(255,255,255,1);
    width: 100%;
    height: 178px;
    &:last-child{
      margin-top: 10px;  
    }
    h3{
      width: calc(100% - 24px);
      height 40px;
      font-size:16px;
      font-family:PingFangSC-Medium;
      font-weight:500;
      color:rgba(51,51,51,1);
      line-height 40px;
      text-indent: 10px;
      position relative;
      margin 0 auto;
      &::before{
        position absolute;
        content: ''
        top: 50%;
        left: 0;
        width:2px;
        height:16px;
        background:rgba(4,48,102,1);
        transform: translateY(-50%);
      }
      &::after{
        position absolute;
        content: ''
        left: 0;
        bottom 0;
        height:1px;
        width: calc(100% + 12px);
        background:rgba(216,216,216,1);
      }
    }
    .img-list{
      width: calc(100% - 24px);
      margin 0 auto;
      margin-top: 12px;
      display: flex;
      flex-flow: row nowrap;
      align-items center;
      justify-content flex-start;
      img{
        width:109px;
        height:109px;
        border-radius: 4px;
        margin-right: 12px;
      }  
    }
  }
}
</style>
